<template>
    <div>
        <div class="search-block">
            <el-form :inline="true" :model="search" class="demo-form-inline">
                <el-form-item label="角色名称">
                    <el-input v-model="search.name" placeholder="角色名称"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="search.state" placeholder="请选择">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="正常" value="1"></el-option>
                        <el-option label="禁用" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="init" size="small"><i class="el-icon-search"></i> 搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="option_block">
            <el-row>
                <el-button type="success" icon="el-icon-circle-plus-outline" @click="addFormVisible = true">添加
                </el-button>
                <el-button type="primary" icon="el-icon-edit" @click="openEditDialog">修改</el-button>
                <el-button type="danger" icon="el-icon-delete" @click="multiDelete">删除</el-button>
                <el-button type="warning" icon="el-icon-refresh-left" @click="multiRestore">恢复</el-button>
            </el-row>
        </div>
        <div class="content">
            <el-table :data="list" v-loading="search.loading" id="form" stripe highlight-current-row
                      @current-change="handleRowChange" height="666" :row-class-name="tableRowClassName">
                <el-table-column prop="id" label="编号" width="200"></el-table-column>
                <el-table-column prop="name" label="角色名称" width="300"></el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <icon-svg :icon="scope.row.state ? 'open_icon_successx' : 'close1'"></icon-svg>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间">
                    <template slot-scope="scope">
                        {{ scope.row.createdAt | parseTime }}
                    </template>
                </el-table-column>
                <el-table-column label="最近更新">
                    <template slot-scope="scope">
                        {{ scope.row.updatedAt | parseTime }}
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="search.page" :page-sizes="[10, 20, 30, 50,100]" :page-size="search.pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="search.total">
            </el-pagination>
        </div>

        <el-dialog title="添加角色" :visible.sync="addFormVisible" :close-on-click-modal="false" width="66%"
                   @open="openAddDialog">
            <el-form :model="addForm" :rules="rules" ref="addForm" class="overForm">
                <el-form-item label="角色名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="addForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="权限关联" :label-width="formLabelWidth">
                    <el-checkbox-group v-model="addForm.permissions" style="width:100%;">
                        <el-table v-loading="addLoading" :data="permissions" border empty-text="暂无数据"
                                  style="width: 100%; margin-top: 20px">
                            <el-table-column width="180" label="第一级">
                                <template slot-scope="scope">
                                    <el-checkbox :label="scope.row.id" :key="scope.row.index">{{scope.row.name}}
                                    </el-checkbox>
                                </template>
                            </el-table-column>
                            <el-table-column label="第二级">
                                <template slot-scope="scope">
                                    <el-checkbox v-for="second in permissions[scope.$index].children" :key="second.id"
                                                 :label="second.id">{{second.name}}
                                    </el-checkbox>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="菜单关联" :label-width="formLabelWidth">
                    <el-checkbox-group v-model="addForm.menus" style="width:100%;">
                        <el-table v-loading="addLoading" :data="menus" border empty-text="暂无数据"
                                  style="width: 100%; margin-top: 20px">
                            <el-table-column width="180" label="第一级">
                                <template slot-scope="scope">
                                    <el-checkbox :label="scope.row.id" :key="scope.row.index">{{scope.row.name}}
                                    </el-checkbox>
                                </template>
                            </el-table-column>
                            <el-table-column label="第二级">
                                <template slot-scope="scope">
                                    <el-checkbox v-for="second in menus[scope.$index].children" :key="second.id"
                                                 :label="second.id">{{second.name}}
                                    </el-checkbox>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="角色描述" :label-width="formLabelWidth">
                    <el-input v-model="addForm.description" type="textarea" name="description"
                              autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="doAdd">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="修改角色" :visible.sync="editFormVisible" :close-on-click-modal="false" width="66%">
            <el-form :model="editForm" :rules="rules" ref="editForm" class="overForm">
                <el-form-item label="角色名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="editForm.id" type="hidden" name="id" style="display:none;"></el-input>
                    <el-input v-model="editForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="权限关联" :label-width="formLabelWidth">
                    <el-checkbox-group v-model="editForm.permissions" style="width:100%;">
                        <el-table v-loading="addLoading" :data="permissions" border empty-text="暂无数据"
                                  style="width: 100%; margin-top: 20px">
                            <el-table-column width="180" label="第一级">
                                <template slot-scope="scope">
                                    <el-checkbox :label="scope.row.id" :key="scope.row.index">{{scope.row.name}}
                                    </el-checkbox>
                                </template>
                            </el-table-column>
                            <el-table-column label="第二级">
                                <template slot-scope="scope">
                                    <el-checkbox v-for="second in permissions[scope.$index].children" :key="second.id"
                                                 :label="second.id">{{second.name}}
                                    </el-checkbox>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="菜单关联" :label-width="formLabelWidth">
                    <el-checkbox-group v-model="editForm.menus" style="width:100%;">
                        <el-table v-loading="addLoading" :data="menus" border empty-text="暂无数据"
                                  style="width: 100%; margin-top: 20px">
                            <el-table-column width="180" label="第一级">
                                <template slot-scope="scope">
                                    <el-checkbox :label="scope.row.id" :key="scope.row.index">{{scope.row.name}}
                                    </el-checkbox>
                                </template>
                            </el-table-column>
                            <el-table-column label="第二级">
                                <template slot-scope="scope">
                                    <el-checkbox v-for="second in menus[scope.$index].children" :key="second.id"
                                                 :label="second.id">{{second.name}}
                                    </el-checkbox>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="角色描述" :label-width="formLabelWidth">
                    <el-input v-model="editForm.description" type="textarea" name="description"
                              autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="doUpdate">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                search: {page: 1, pageSize: 10, total: 0, loading: false},
                addFormVisible: false,
                editFormVisible: false,
                formLabelWidth: '120px',
                addForm: {permissions: [], menus: []},
                editForm: {permissions: [], menus: []},
                permissions: [],
                menus: [],
                addLoading: true,
                list: [],
                allList: [],
                selectedRow: null,
                rules: {
                    name: [{required: true, message: '请输入角色名称', trigger: 'blur'}],
                },
            };
        },
        mounted() {
            this.init();
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (row.state == 0) {
                    return 'warning-row';
                }
            },
            handleRowChange(val) {
                this.selectedRow = val;
            },
            handleSizeChange(val) {
                this.search.pageSize = val;
                this.search.page = 1;
                this.init();
            },
            handleCurrentChange(val) {
                this.search.page = val;
                this.init();
            },
            doUpdate() {
                const _this = this;
                _this.$confirm("确定修改此角色吗?", "").then(function () {
                    axios.post(basePath + '/role/update', _this.editForm).then(function (res) {
                        _this.$message({
                            message: res.msg,
                            type: (res.success ? 'success' : 'error')
                        });
                        if (res.success) {
                            //添加成功
                            _this.editFormVisible = false;
                            _this.editForm = {
                                permissions: [], menus: []
                            };
                            _this.init();
                        }
                    });
                });
            },
            doAdd() {
                const _this = this;
                _this.$refs['addForm'].validate((valid) => {
                    if (valid) {
                        axios.post(basePath + '/role/add', _this.addForm).then(function (res) {
                            _this.$message({
                                message: res.msg,
                                type: (res.success ? 'success' : 'error')
                            });
                            if (res.success) {
                                //添加成功
                                _this.addForm = {
                                    permissions: [], menus: []
                                };
                                _this.addFormVisible = false;
                                _this.init();
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            openAddDialog() {
                const _this = this;
                _this.addLoading = true;
                //加载权限
                axios.post(basePath + '/permission/list').then(function (res) {
                    _this.permissions = res.data.children;
                });
                axios.post(basePath + '/menus/list').then(function (res) {
                    _this.menus = res.data.children;
                });
                _this.addLoading = false;
            },
            init() {
                const _this = this;
                _this.search.loading = true;
                _this.loadList(function (res) {
                    _this.list = res.data;
                    _this.search.page = res.page;
                    _this.search.total = res.total;
                    _this.search.loading = false;
                });
            },
            loadList(func) {
                axios.post(basePath + '/role/list', this.search).then(func);
            },
            multiOption(state) {
                const msg = state === 1 ? '恢复' : '删除';
                const request_path = state === 1 ? '/role/restore/' : '/role/delete/';
                const _this = this;
                if (this.selectedRow) {
                    _this.$confirm("确定要" + msg + "选中的角色吗?", "").then(function () {
                        axios.post(basePath + request_path + _this.selectedRow.id).then(function (res) {
                            _this.$message({
                                message: res.msg,
                                type: res.success ? 'success' : 'error'
                            });
                            if (res.success) {
                                _this.search.loading = true;
                                _this.init();
                            }
                        });
                    });
                } else {
                    this.$message.error("请选择要删除的角色");
                }
            },
            multiRestore() {
                this.multiOption(1);
            },
            multiDelete() {
                this.multiOption(0);
            },
            openEditDialog() {
                const _this = this;
                if (this.selectedRow) {
                    _this.addLoading = true;
                    //加载权限
                    axios.post(basePath + '/permission/list').then(function (res) {
                        _this.permissions = res.data.children;
                    });
                    axios.post(basePath + '/menus/list').then(function (res) {
                        _this.menus = res.data.children;
                    });
                    axios.get(basePath + '/role/info/' + _this.selectedRow.id).then(function (res) {
                        if (res.success) {
                            _this.editForm = res.data;
                            _this.editFormVisible = true;
                            _this.addLoading = false;
                        } else {
                            _this.$message.error(res.msg);
                        }
                    });
                } else {
                    _this.$message.error('请选择要修改的角色');
                }
            }
        }
    }
</script>
